<template>
	<view class="">

		<u-toast ref="uToast" />

		<u-popup mode="bottom" v-model="show" border-radius="14" @close="close">

			<view class="u-padding-20">
				<view class="u-flex">
					<view>
						<u-image :src="info.cover" width="158" height="158"></u-image>
					</view>
					<view class="u-margin-left-20" style="width: 520rpx;">
						<view class="u-font-lg u-line-2">
							{{info.goodsName}}
						</view>
						<view class="u-flex u-row-between" style="align-items: center;">
							<view>
								<text style="color:#FF6450;font-size: 36rpx;">￥{{statusing==5?info.ptPrice:info.price}}</text>
								<text
									style="color:#999999;font-size: 24rpx;margin-left: 10rpx;text-decoration: line-through;">￥{{info.linePrice}}</text>
							</view>
							<view class="" style="color:#999999;font-size: 24rpx;" v-if="statusing!==4">
								仅剩{{info.sku}}件
							</view>
						</view>
					</view>
				</view>

				<view class="u-flex u-row-between" style="margin: 20rpx 0;" v-if="info.spec.length">
					<view style="color: #333;font-size: 32rpx;font-weight: bold;" >商品规格</view>
					<view style="color: #628DFF;font-size: 24rpx;">已选{{selecting}}</view>
				</view>


				<view class="row">
					<view class="btn" v-for="(item,index) in info.spec" :key="index" :class="current==index?'change':''"
						@click="cbtnList(item,index)">
						{{item.specName}}
					</view>
				</view>


				<view class="" style="margin: 20rpx 0;" v-if="statusing!==4">
					<view class="u-flex u-row-between">
						<view style="color: #333;font-size: 32rpx;font-weight: bold;">商品数量</view>
						<view>
							<u-number-box  :max="info.max?info.max-info.meBuyCount:99" v-model="value" @change="valChange" bg-color="#628DFF" color="#fff" min="1">
							</u-number-box>
						</view>
					</view>
					
					<view v-if="info.max" style="color: #FF6450;display: flex;justify-content: flex-end;margin-top: 20rpx;">该商品您当前限购{{info.max-info.meBuyCount}}件</view>
				</view>

				<view :class="info.sku ?'':'opti'" v-if="statusing!==4">
					<u-button shape="circle" :custom-style="{background:'#FF6450',color:'#fff',marginTop:'40rpx'}"
						@click="submit" :disabled="info.sku?false:true" :ripple="true">{{statusing==3?'立即购买':'确认'}}</u-button>
				</view>
				<view v-else>
					<u-button shape="circle" :custom-style="{background:'#FF6450',color:'#fff',marginTop:'40rpx'}"
						@click="submit"  :ripple="true">{{statusing==3?'立即购买':'确认'}}</u-button>
				</view>
								


			</view>

		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {},
				show: false,
				value: 1,
				selecting: "",
				current: -1,
				statusing: ""
			}
		},
		methods: {
			close(){
				this.show=false
			},
			cbtnList(item, index) {
				var {
					id,
					specName,
					price,
					linePrice,
					id,
					sku,
					ptPrice
				} = item;
				console.log(this.statusing)
				this.selecting = specName;
				if(this.statusing==5){
						this.info.ptPrice = ptPrice;
				}else{
						this.info.price = price;
				}
				
			
				this.info.sku = sku;
				this.info.linePrice = linePrice
				this.$parent.Sid = id
				this.$parent.size = specName
				this.current = index
			},
			valChange(e) {
				console.log('当前值为: ' + e.value)
			},
			submit() {
				// 立即购买
			
				if (this.statusing == 2) {
					if (this.info.spec.length) {
						if (!this.$parent.Sid) {
							this.$refs.uToast.show({
								title: '请先选择规格',
								type: 'error ',
							})
						} else {
							this.buy()
						}
					} else {
						this.buy()
					}
				}
				if (this.statusing == 3) {
					if (this.info.spec.length) {
						if (!this.$parent.Sid) {
							this.$refs.uToast.show({
								title: '请先选择规格',
								type: 'error ',
							})
						} else {
							this.buy()
						}
					} else {
						this.buy()
					}
				}
				//加入购物车
				if(this.statusing==1){
					if (this.info.spec.length) {
						if (!this.$parent.Sid) {
							this.$refs.uToast.show({
								title: '请先选择规格',
								type: 'error ',
							})
						} else {
							this.addcar()
						}
					} else {
						this.addcar()
					}
				}
				// 砍价商品
				if(this.statusing==4){
					if (this.info.spec.length) {
						if (!this.$parent.Sid) {
							this.$refs.uToast.show({
								title: '请先选择规格',
								type: 'error ',
							})
						} else {
				
							this.show=false;
							this.$parent.surepop=true
						
							// 显示确认砍价弹框
							
						}
					} else {
					
						   this.show=false;
						  this.$parent.surepop=true
					}
				
				}
				//拼团购买
				if (this.statusing == 5) {
					console.log(1111)
					if (this.info.spec.length) {
						if (!this.$parent.Sid) {
							this.$refs.uToast.show({
								title: '请先选择规格',
								type: 'error ',
							})
						} else {
							this.ptt()
						}
					} else {
						this.ptt()
					}
				}
				
			},
			//拼团
			ptt(){
				this.$u.post('/api/indent/affirm', {
					goods_id: this.info.id,
					goods_spec_id: this.$parent.Sid,
					num: this.value,
					pt:1
				}, {}).then(res => {
					uni.redirectTo({
						url: "../../pages/sure_book/index?num="+this.value+ '&Sid='+ this.$parent.Sid + '&id='+this.info.id +'&ptt='+0
					})
				}).catch(err => {})
				
			},
			// 立即购买
			buy() {
				this.$u.post('/api/indent/affirm', {
					goods_id: this.info.id,
					goods_spec_id: this.$parent.Sid,
					num: this.value,
				}, {}).then(res => {
					uni.redirectTo({
						url: "../../pages/sure_book/index?num="+this.value+ '&Sid='+ this.$parent.Sid + '&id='+this.info.id +'&ptt='+1
					})
				}).catch(err => {})

			},
			//加入购物车
			addcar(){
				this.$u.post('/api/indent/cartAdd', {
					goods_id: this.info.id,
					goods_spec_id: this.$parent.Sid,
					num: this.value,
				}, {}).then(res => {
					this.$refs.uToast.show({
							title: '加入购物车成功',
							type: 'success',
					})
					this.show=false
				}).catch(err => {})
			
			}
			
			
		}
	}


</script>

<style lang="scss">
	.opti{
		opacity: 0.6;
	}
	.row {
		display: flex;
		flex-wrap: wrap;
	}

	.btn {
		padding: 0 20rpx;
		line-height: 66rpx;
		background: #F7F7F7;
		border-radius: 60rpx;
		text-align: center;
		color: #999999;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}

	.change {
		background: #628DFF;
		color: #FFFFFF;
		opacity: 1;
		transition: all 0.3s
	}
</style>
